<template>
    <div>
        <div class="hesadf">
            <div>
                <h2><span class="hbnh"><a class="fan" href="javascript:history.back(-1)"></a></span> 资金明细 </h2>
            </div>
        </div>
        <div class="head">
            <div class="thj"><a :class="xz == '0' ? 'xuan' : ''" @click="xuanze(0)">资金明细</a>
                <a :class="xz == '1' ? 'xuan' : ''" @click="xuanze(1)">充值记录</a>
                <a :class="xz == '2' ? 'xuan' : ''" @click="xuanze(2)">提现记录</a>
                <span class="tiaokl" :class="xz == 0 ? 'tiaok1' : xz == 1 ? 'tiaok2' : 'tiaok3'"></span>
            </div>
        </div>
        <div role="feed" class="van-list">
            <!-- <ul class="czjl"></ul>
            <div class="van-list__placeholder"></div> -->
            <capitalList v-if="(xz==0)"></capitalList>
            <rechargeList v-if="(xz==1)"></rechargeList>
            <cashList v-if="(xz==2)"></cashList>
        </div>
    </div>
</template>
<script>
//引入提现记录
import cashList from '@/page/cashWithdrawalRecord/compontents/cash-list'
import rechargeList from '@/page/user/compontents/recharge-list'
import capitalList from '@/page/user/compontents/capital-all'


export default {
    components: {
        cashList,
        capitalList,
        rechargeList
    },
    data() {
        return {
            xz: 0,
        }
    },
    methods: {
        xuanze(e) {
            this.xz = e
            console.log(this.xz)
        }
    }
}
</script>
<style scoped>
.hesadf {
    height: 1.1748rem;
     background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
}

h2 {
    text-align: center;
    height: 1.2549rem;
    width: 100%;
    position: relative;
    line-height: 1.2549rem;
    font-size: 0.4806rem;
    color: #fff;
    background: transparent;
    font-weight: 500;
    z-index: 3;
}

.hbnh {
    position: absolute;
    left: 0.4005rem;
    font-size: 0.4272rem;
    font-weight: 500;
}

.fan {
    width: 0.2403rem;
    height: 0.4272rem;
    background: url() no-repeat 50%;
    background-size: 100%;
    display: inline-block;
    margin-right: 0.1335rem;
    vertical-align: middle;
    margin-top: -0.0534rem;
}

.xind {
    position: absolute;
    right: 0.4005rem;
    color: #fff;
    font-size: 0.3738rem;
    font-weight: 500;
}

.shaux[data-v-7793a11f] {
    position: absolute;
    width: 0.4806rem;
    height: 0.4806rem;
    background: url() no-repeat 50%;
    background-size: 100%;
    right: 0.4005rem;
    top: 0.4005rem;
}

.head {
    height: 1.1214rem;
    background: #fff;
    border-bottom: 0.0267rem solid #e0e0e0;
}

.thj {
    width: 9.345rem;
    height: 1.1214rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
}

.thj a {
    width: 33.3%;
    text-align: center;
    color: #666;
    line-height: 1.1214rem;
    font-size: 0.3471rem;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.xuan {
    width: 33.3%;
    text-align: center !important;
    ;
    color: #666 !important;
    line-height: 1.1214rem !important;
    font-size: 0.3471rem !important;
    -webkit-transition: all .3s !important;
    transition: all .3s !important;
    color: #5d7dfb !important;
}

.tiaokl {
    width: 0.534rem;
    height: 0.1068rem;
    background: #5d7dfb;
    border-radius: 0.0534rem;
    position: absolute;
    bottom: 0.1335rem;
    left: 17%;
    margin-left: -0.267rem;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.tiaok1 {
    left: 17%;
}

.tiaok2 {
    left: 50%;
}

.tiaok3 {
    left: 83%;
}

</style>